﻿body{
text-align:center;
background:#a46740 url(../images/bg.jpg);
}

#game{
border-radius:10px;
border:1px solid #666;
background:#232 url(../images/table.jpg);
width:500px;
height:460px;
margin:0 auto;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}

#cards{
position:relative;
width:380px;
height:400px;
}

.card{
-webkit-perspective:600;
width:80px;
height:120px;
position:absolute;
-moz-transition:all .3s;
-webkit-transition:all .3s;
transition: all .3s;
}

.face{
border-radius:10px;
width:100%;
height:100%;
position:absolute;
-webkit-transition-property: opactiy, tansform, box-shadow;
-webkit-transition-duration: .3s;
-webkit-backface-visibility:hidden;
}

.front{
background: #999 url(../images/deck.png) 0 -480px;
z-index: 10;
}

.back{
background: #efefef url(../images/deck.png);
-webkit-transform:rotate3d(0,1,0,-180deg);
z-index:8;
}

.card:hover .face, .card-flipped .face{
-webkit-box-shadow:0 0 10px #aaa;
}

.card-flipped .front{
-webkit-transform:rotate3d(0,1,0,180deg);
z-index:8;
}

.card-flipped .back{
-webkit-transform:rotate3d(0,1,0,0deg);
z-index:10;
}

.card-removed{
opacity:0;
}

.cardAJ{background-position:-800px 0;}
.cardAQ{background-position:-880px 0;}
.cardAK{background-position:-960px 0;}
.cardBJ{background-position:-800px -120px;}
.cardBQ{background-position:-880px -120px;}
.cardBK{background-position:-960px -120px;}